<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<style>
  .box {
    width: 200px;
    height: 200px;
    border: 3px solid #000;
    font-size: 30px;
    margin-top: 10px;
  }
  .pink {
    background-color: pink;
  }
  .big {
    width: 300px;
    height: 300px;
  }
</style>
<div id="app">
  <!--v-bind:
      作用: 动态的设置html标签属性
      语法: v-bind:属性名="表达式"（常见为url形式保存着的资源）
      写法:
           (1) v-bind:src=""  ——————标准写法
           (2) :src           ——————语法糖
      注意:
          (1)插值表达式里不能直接写{{}} 这样不对: v-bind:src="{{imgUrl}}" 、 v-bind:src= {{imgUrl}}
          (2)vue的赋值语句基本都要在""内部写，即使""里面是变量也要这样，这和传统的JAVA代码有很大的区别

       -->
  <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
  <img :src="imgUrl" :title="msg" alt="">
  <br>
  <!--为了方便开发者进行样式控制,Vue扩展了v-bind语法,可以针对class类名和style行内样式进行控制-->
  <!--
      语法 :class="对象/数组"
        (1) 对象:键就是类名，值是布尔值。如果值为ture就表示有这个类，否则表示没有这个类
            <div class="box" :class="{ 类名1: 布尔值 , 类名2: 布尔值}"></div>
        (2) 数组:数组中所有的类都会添加到盒子上，本质上就是一个class列表
            <div class="box" :class="[ 类名1, 类名2 , 类名3 ]"></div>
  -->
  <!--原始写法-->
  <div class="box"></div>
  <div class="box pink" ></div>
  <div class="box big" ></div>
  <div class="box pink big" ></div>
  <!--传对象-->
  <div class="box"  :class="{big: false , pink: judge}"></div>
  <!--传数组-->
  <div class="box" :class="['pink' , 'big']"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      imgUrl: './imgs/10-02.png',
      msg: 'hello 波仔',
      count: 0,
      judge: true
    }
  })

</script>
</body>
</html>